<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
        function select() {
            var job = $("#job option:selected").val();
            var upload = $("#upload");
            var certificate = $("#certificate");
            var fileError = $("#fileError");
            var format = $("#format");
            if (job === 'admin') {
                upload.css('display', 'none');
                certificate.css('display', 'none');
                fileError.css('display', 'none');
                format.css('display', 'none');
            } else {
                upload.css('display', 'block');
                certificate.css('display', 'inline');
                fileError.css('display', 'inline');
                format.css('display', 'block');
            }

            if (fileError.css('color') !== 'rgb(0, 128, 0)') {
                if (job === 'admin') {
                    fileError.css('color', 'green');
                } else fileError.css('color', 'red');
            }

            if (job === 'job') {
                $("#select").attr("disabled", false);
            } else {
                $("#select").attr("disabled", true);
            }



        }

        function f() {
            var filePath=$("#certificate").val().split('\\');
            var fileName=filePath[filePath.length-1];
        }

        function canSubmit() {
            return $("#jobError").css('color') === 'rgb(0, 128, 0)' && $("#fileError").css('color') === 'rgb(0, 128, 0)' && $("#nameError").css('color') === 'rgb(0, 128, 0)' && $("#pwdError").css('color') === 'rgb(0, 128, 0)' && $("#phoneError").css('color') === 'rgb(0, 128, 0)' && $("#emailError").css('color') === 'rgb(0, 128, 0)';
        }


        function jobCheck() {
            var jobError = $("#jobError");
            var jobDIV=$("#jobDIV");
            $.post({
                url: ctxPath+"jobCheck",
                data: {'job': $("#job option:selected").val()},
                success: function (data) {
                    if (data.toString() === "") {
                        jobError.css("color", "green");
                        jobDIV.removeClass("has-error");
                        jobDIV.addClass("has-success")
                    } else {
                        jobError.css("color", "red");
                        jobDIV.removeClass("has-success");
                        jobDIV.addClass("has-error");
                    }
                    jobError.html(data);
                }
            });

        }

        function fileCheck() {
            var job = $("#job option:selected").val();
            var filePath = $("#certificate").val().split('\\');
            var fileName =filePath[filePath.length-1];
            var fileError = $("#fileError");
            $.post({
                url: ctxPath+"fileCheck",
                data: {'fileName': fileName,'job':job},
                success: function (data) {
                    if (data.toString() === "") {
                        fileError.css("color", "green");
                    } else {
                        fileError.css("color", "red");
                    }
                    fileError.html(data);
                }
            });

        }

        function phoneCheck() {
            var phoneError = $("#phoneError");
            var phoneDIV=$("#phoneDIV");
            $.post({
                url: ctxPath+"phoneCheck",
                data: {'phone': $("#phone").val()},
                success: function (data) {
                    if (data.toString() === '') {
                        phoneError.css("color", "green");
                        phoneDIV.removeClass("has-error");
                        phoneDIV.addClass("has-success")

                    } else {
                        phoneError.css("color", "red");
                        phoneDIV.removeClass("has-success");
                        phoneDIV.addClass("has-error")
                    }
                    phoneError.html(data);
                }
            });
        }

        function regPwdCheck() {
            var pwdError = $("#pwdError");
            var regPwdDIV=$("#regPwdDIV");
            $.post({
                url: ctxPath+"regPwdCheck",
                data: {'regPwd': $("#password").val()},
                success: function (data) {
                    if (data.toString() === '') {
                        pwdError.css("color", "green");
                        regPwdDIV.removeClass("has-error");
                        regPwdDIV.addClass("has-success")
                    } else {
                        pwdError.css("color", "red");
                        regPwdDIV.removeClass("has-success");
                        regPwdDIV.addClass("has-error")
                    }
                    pwdError.html(data);
                }
            });
        }

        function nameCheck() {
            var nameError = $("#nameError");
            var nameDIV=$("#nameDIV");
            $.post({
                url: ctxPath+"nameCheck",
                data: {'name': $("#name").val()},
                success: function (data) {
                    if (data.toString() === '') {
                        nameError.css("color", "green");
                        nameDIV.removeClass("has-error");
                        nameDIV.addClass("has-success");

                    }
                    else {
                        nameError.css("color", "red");
                        nameDIV.removeClass("has-success");
                        nameDIV.addClass("has-error");

                    }
                    nameError.html(data);
                }
            });
        }

        function emailCheck() {
            var emailError = $("#emailError");
            var emailDIV=$("#emailDIV");
            $.post({
                url: ctxPath+"emailCheck",
                data: {'email': $("#email").val()},
                success: function (data) {
                    if (data.toString() === '') {
                        emailError.css("color", "green");
                        emailDIV.removeClass("has-error");
                        emailDIV.addClass("has-success");

                    }
                    else {
                        emailError.css("color", "red");
                        emailDIV.removeClass("has-success");
                        emailDIV.addClass("has-error");

                    }
                    emailError.html(data);
                }
            });
        }

    </script>
    <style>
        .progressText {
            font-size: large;
            margin-top: 5px;
            color: white;
            font-family: YouYuan, serif;
            font-weight: bold;
        }
    </style>

</head>

<body>
<!--<h1>注册</h1>


<form id="registForm" action="/canRegist" enctype="multipart/form-data" method="post" onsubmit="return canSubmit()">-->
<!--<select id="job" name="job" onchange="select();jobCheck();" style="text-align-last: center">-->

<!--<option value="select" id="select">-&#45;&#45;请选择职业-&#45;&#45;</option>-->
<!--<option value="doctor">医生</option>-->
<!--<option value="pharmacist">药师</option>-->
<!--<option value="admin">管理员</option>-->
<!--</select>-->
<!--<span id="jobError"></span>-->
<!--<br><br>-->
<!--<input type="text" id="name" name="name" placeholder="请输入姓名" onblur="nameCheck()"><span id="nameError"></span><br>-->
<!--<input type="password" id="password" name="password" placeholder="请输入密码" onblur="regPwdCheck()"><span id="pwdError"></span><br>-->
<!--<input type="text" id="phone" name="phone" placeholder="请输入手机号" onblur="phoneCheck()"><span id="phoneError"></span><br>-->
<!--<input type="text" id="email" name="email" placeholder="请输入邮箱" onblur="emailCheck()"><span id="emailError"></span><br>-->


<!--<p id="upload">请上传资格证照片:</p>-->
<!--<input type="file" id="certificate" name="certificate" accept=".jpg,.png" onchange="fileCheck()">-->
<!--<span id="fileError"></span>-->
<!--<br>-->
<!--<small id="format">只能上传.jpg或者.png格式</small>-->
<!--<br><br>-->

<!--<input id="submit" type="submit" onclick="jobCheck();fileCheck();"><span style="color: red" th:text="${registError}"-->
<!--th:if="${not #strings.isEmpty(registError)}"></span>-->
<!--</form>-->
<div class="container" style="margin-top: 5%">
    <div class="progress progress-striped active" style="height: 30px">
        <div class="progress-bar progress-bar-warning" role="progressbar"
             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
             style="width: 33%;">
            <p class="progressText">注册信息</p>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="col-md-6 col-md-offset-3">
            <form role="form" id="registForm" action="canRegist" enctype="multipart/form-data" method="post" onsubmit="return canSubmit()">
                <div class="form-group input-group-lg" id="jobDIV">
                    <label for="job"></label><select class="form-control" id="job" name="job" onchange="select();jobCheck();">
                        <option value="select" id="select">请选择职业</option>
                        <option value="doctor">医生</option>
                        <option value="pharmacist">药师</option>
                        <option value="admin">管理员</option>
                    </select>
                </div>

                <p class="text-danger" style="font-size: medium;color: red" id="jobError"></p>

                <div class="form-group input-group-lg" style="margin-top: 5px" id="nameDIV">
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名" onblur="nameCheck()">
                </div>

                <p class="text-danger" style="font-size: medium;color: red" id="nameError"></p>

                <div class="form-group input-group-lg" style="margin-top: 5px" id="regPwdDIV">
                    <input type="text" class="form-control" id="password" name="password" placeholder="请输入密码（8-16位字母、数字）" onblur="regPwdCheck()">
                </div>

                <p class="text-danger" style="font-size: medium;color: red" id="pwdError"></p>

                <div class="form-group input-group-lg" style="margin-top: 5px" id="phoneDIV">
                    <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号" onblur="phoneCheck()">
                </div>

                <p class="text-danger" style="font-size: medium;color: red" id="phoneError"></p>

                <div class="form-group  input-group-lg" style="margin-top: 5px" id="emailDIV">
                    <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱" onblur="emailCheck()">
                </div>

                <p class="text-danger" style="font-size: medium;color: red" id="emailError">

                <div class="form-group" style="margin-top: 5px">
                    <label for="certificate" style="font-size: 15px" id="upload">请上传资格证照片</label>
                    <input type="file" id="certificate" name="certificate" accept=".jpg,.png" onchange="fileCheck();f()" style="color: #00FF00">
                <b style="display: inline" id="format" >只能上传.jpg或者.png格式,文件大小不能超过5MB</b>
                </div>

                <p class="text-danger" style="font-size: medium;color: red" id="fileError">

                <div style="margin-top: 5px">
                    <button type="submit" class="btn btn-block btn-primary btn-lg" onclick="jobCheck();fileCheck();nameCheck();regPwdCheck();emailCheck();phoneCheck()" id="submit">注册</button>
                </div>
                <div style="margin-top: 15px">
                    <p class="text-danger" style="font-size: medium;color: red" th:text="${registError}"
                       th:if="${not #strings.isEmpty(registError)}"></p>
                </div>
            </form>
        </div>

    </div>
</div>

</body>

</html>